<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div id="msg"></div>
    <input type="text" oninput="changeValue(this)">
  </div>
</body>
<script>
  // 参照值 - // 1. 定义对象 
  var userInfo = { username: '吴大勋'}
 // 需要劫持的对象 - 2. 数据劫持 
  var obj = {}
  // undefined
  // document.getElementById('msg').innerHTML = obj.name
  // 劫持了 obj对象的 name属性，不管你有没有
  Object.defineProperty(obj, 'name', {
    set (val) {
      userInfo.username = val
      document.getElementById('msg').innerHTML = obj.name
    },
    get () {
      return userInfo.username
    }
  })
  // 3. 实时渲染  只作用了第一次，如果不数据劫持，显示的是 undefined
  document.getElementById('msg').innerHTML = obj.name
  // 4. 发布订阅 
  function changeValue (ele) {
    console.log(ele.value)
    obj.name = ele.value
  }
  
</script>
</html>